<!DOCTYPE html>
<html>

<head>
    <title>登录</title>
    <meta charset="utf-8">
    <style>
        html,
        body {
            height: 99%;
            background-color: #66ccff;
        }

        .main {
            min-height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-outer {
            margin-bottom: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: white;
            width: 400px;
            height: 500px;
            border-radius: 15px;
        }

        .login {
            margin-bottom: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 500px;
        }

        .inputBox {
            margin-bottom: 20px;
            border: none;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
            width: 300px;
        }

        .btn {
            background-color: #66ccff;
            border: none;
            padding: 10px;
            width: 320px;
            color: white;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
        }

        a {
            text-decoration: none;
            color: rgba(0, 0, 0, .65);
            font-size: small;
        }
    </style>
    <script type="text/javascript" src="../jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../sha1.min.js"></script>
    <script>
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
            }
            return "";
        }

        function loginError(count) {
            if (count) {
                count++;
                document.cookie = "login=" + count;
            } else {
                document.cookie = "login=1";
            }
        }

        function verify() {
            let account = $("#account input").val();
            let password = $("#password input").val();
            password = sha1(password);
            if (account == "" || password == "") {
                alert("账号或密码不能为空！");
            } else {
                // 输入错误3次及以上，弹出滑动验证码
                let count = Number(getCookie("login"));
                if (count > 3) {
                    document.getElementById("ifrmid").contentWindow.location.reload();
                    $("#verify").css("display", "block");
                    $("#login-content").css("display", "none");
                    return
                }
                login(account, password, count);
            }
        }

        function login(account, password, count) {
            $.ajax({
                url: "login.php",
                type: "POST",
                data: {
                    account: account,
                    password: password
                },
                success(res) {
                    if (res == 1) {
                        location.href = "user.html";
                    } else if (res == 2) {
                        alert("密码错误！");
                        $("#password input").val("");
                        loginError(count);
                    } else if (res == 3) {
                        location.href = "manage/manage.html"
                    } else {
                        alert("用户不存在！");
                        $("#account input").val("");
                        $("#password input").val("");
                        loginError(count);
                    }
                }
            })
        }

        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                document.getElementById("login").click();
            }
        })
    </script>
</head>

<body>
    <div class="main">
        <div class="login-outer">
            <div id="verify" style="display: none;">
                <iframe id="ifrmid" src="../SliderCaptcha/src/index.html" width="400px" height="500px"
                    loading="lazy"></iframe>
            </div>
            <div id="login-content" class="login">
                <h1>登录</h1>
                <div id="account">
                    <input class="inputBox" type="text" placeholder="请输入账号">
                </div>
                <div id="password">
                    <input class="inputBox" type="password" placeholder="请输入密码">
                </div>
                <div>
                    <input id="login" class="btn" type="submit" value="登录" onclick="verify()">
                </div>
                <div style="margin-top: 10px;">
                    <a href="../type/exercise.html">访客登录</a>
                </div>
            </div>
        </div>
    </div>
    <footer style="background:none;bottom: 0;width: 100%;height: 50px;margin-top: -50px;text-align: center;">
        <a href="https://github.com/HuanLing4763/dazi/" target="_blank">项目源码</a>
        |
        <a href="mailto:2043417914@qq.com" onclick="window.open('https://gitee.com/huan_ling/dazi/')">联系我们</a>
        <br>
        <a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20****87号-1</a>
    </footer>
</body>

</html>